import { Button, message } from 'antd';
import ProForm, {
  ModalForm,
  ProFormText,
  ProFormSwitch,
  ProFormSelect,
} from '@ant-design/pro-form';

import { request } from 'umi';
import { PlusOutlined, AlertOutlined } from '@ant-design/icons';
import { useState, useEffect } from 'react';
import { api } from '@/global';

type UserInfo = {
  id: string;
  phone: string;
  name: string;
  sex: string;
  email: string;
  statu: number;
  dept: string;
  role: string;
  portrait: string;
  num: string;
  professional: string;
};

type deptTyp = {
  id: string;
  deptName: string;
};
type conditionType = {
  id: string;
  statu: string;
};

type roleType = {
  id: string;
  roleName: string;
};
type professionalType = {
  id: number;
  professionalName: string;
};

const waitTime = (time: number = 100) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(true);
    }, time);
  });
};

export default (props: any) => {
  const [data, SetDate] = useState<UserInfo>();
  const [modalVisit, setModalVisit] = useState(false);

  useEffect(() => {
    async function getUserInfo() {
      const d = await request<{ data: UserInfo }>(api.getUserInfo, {
        params: {
          id: props.record.id,
        },
      });

      SetDate(d.data);
    }
    getUserInfo();
  }, []);
  return (
    <ModalForm<{
      name: string;
      company: string;
    }>
      title="编辑用户信息"
      trigger={
        <Button type="primary">
          <AlertOutlined />
          编辑
        </Button>
      }
      visible={modalVisit}
      onVisibleChange={setModalVisit}
      autoFocusFirstInput
      modalProps={{
        destroyOnClose: true,
        onCancel: () => console.log('run'),
      }}
      onFinish={async (values) => {
        await waitTime(2000);
        values.id = props.record?.id;

        const updateData = await request(api.updateUserInfo, {
          method: 'POST',

          data: values,
        });
        if (updateData.success) {
          props.reloadPage();

          message.success('更新成功');
          return true;
        } else {
          message.error('更新失败');
          return false;
        }
      }}
    >
      <ProForm.Group>
        <ProFormText
          width="sm"
          name="name"
          label="请输入用户姓名"
          placeholder="请输入姓名"
          initialValue={data?.name}
          rules={[
            {
              required: true,
              message: '请输入姓名',
            },
          ]}
        />
        <ProFormText
          width="md"
          name="num"
          initialValue={data?.num}
          tooltip="如果无请空下"
          label="请输入用户学号"
          placeholder="请输入学号"
        />
      </ProForm.Group>
      <ProForm.Group>
        <ProFormSelect
          request={async () => [
            {
              value: 1,
              label: '男',
            },
            {
              value: 2,
              label: '女',
            },
          ]}
          width="xs"
          name="sex"
          initialValue={data?.sex}
          label="选择用户性别"
          rules={[
            {
              required: true,
              message: '请输入性别',
            },
          ]}
        />
        <ProFormText
          width="sm"
          name="email"
          label="请输入用户邮箱号"
          initialValue={data?.email}
          placeholder="请输入邮箱号"
          rules={[
            {
              required: true,
              message: '请输入邮箱',
            },
            {
              pattern: /^([A-Za-z0-9_\-\.\u4e00-\u9fa5])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,8})$/,
              message: '请输入正确的邮箱号',
            },
          ]}
        />
      </ProForm.Group>
      <ProForm.Group>
        <ProFormText
          width="sm"
          name="phone"
          label="请输入用户手机号"
          placeholder="请输入手机号"
          initialValue={data?.phone}
          rules={[
            {
              required: true,
              message: '请输入用户手机号',
            },
            {
              pattern: /^(\+?0?86\-?)?1[3-9]\d{9}$/,
              message: '请输入正确的手机号',
            },
          ]}
        />

        <ProFormSelect
          width="xs"
          request={async () => {
            const conditionData = await request(api.getRoleList, {});

            const list: any[] = [];
            conditionData.data.map((item: roleType) => {
              list.push({
                label: item.roleName,
                value: item.id,
              });
            });

            return list;
          }}
          name="role"
          label="为用户选择角色"
          initialValue={data?.role}
          rules={[
            {
              required: true,
              message: '请为用户选择角色',
            },
          ]}
        />
      </ProForm.Group>
      <ProForm.Group>
        <ProFormSelect
          initialValue={data?.dept}
          request={async () => {
            const deptData = await request(api.getAllDept, {});
            const list: any[] = [];

            deptData.data.map((item: deptTyp) => {
              list.push({
                label: item.deptName,
                value: item.id,
              });
            });

            return list;
          }}
          width="sm"
          name="dept"
          label="选择用户系部"
          rules={[
            {
              required: true,
              message: '请选择系部',
            },
          ]}
        />

        <ProFormSelect
          request={async () => {
            const deptData = await request(api.getSimpleProfessional, {});
            const list: any[] = [];
            deptData.data.map((item: professionalType) => {
              list.push({
                label: item.professionalName,
                value: item.id,
              });
            });

            return list;
          }}
          width="sm"
          name="professional"
          label="选择用户所在专业"
          initialValue={data?.professional}
          tooltip="若无专业可以不填"
        />
        <ProFormSelect
          width="xs"
          initialValue={data?.statu}
          request={async () => {
            const conditionData = await request(api.getAllCondition, {});

            const list: any[] = [];
            conditionData.data.map((item: conditionType) => {
              list.push({
                label: item.statu,
                value: item.id,
              });
            });

            return list;
          }}
          name="statu"
          label="为用户选择状态"
          rules={[
            {
              required: true,
              message: '请为用户选择状态',
            },
          ]}
        />
      </ProForm.Group>
    </ModalForm>
  );
};
